<!--  -->
<template>
  <div class="container flex-column flex-sub">
    <!-- 查询条件 -->
    <!-- <div class="flex-row justify-between">
      <div>
        <el-form
          ref="queryForm"
          inline
          :model="queryInfo"
          class="demo-form-inline"
          label-position="left"
          label-width="80px"
        >
          <el-form-item label="用户名">
            <el-input v-model="queryInfo.name" style="width: 350px;" placeholder="请输入用户名" />
          </el-form-item>
        </el-form>
      </div>
      <div class="mg-top-4" style="flex-shrink: 0;">
        <el-button type="info" @click="getCardPageList">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </div> -->
    <!-- 添加按钮 -->

    <custom-button @click="handleAdd" />
    <!-- table -->
    <div class="flex-sub table-container">
      <el-table
        v-loading="loading"
        :data="tableData"
        height="98%"
        header-cell-class-name="table-header-cell"
        header-row-class-name="table-header-row"
      >
        <el-table-column prop="name" label="方案名称" />
        <el-table-column prop="unit" label="计量单位" />
        <el-table-column prop="unitPrice" label="计费单价" />
        <el-table-column prop="initUsed" label="计费面积" />
        <el-table-column prop="payTime" label="缴费日期">
          <template slot-scope="scope">
            <span>
              <span>每月</span>
              <span class="pd-lr-4">{{ scope.row.payTime | dateFormat('D') }}</span>
              <span>号</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注说明" />
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          :width="handleScreenWidthToVw(100)"
        >
          <template slot-scope="scope">
            <div class="flex-row">
              <div class="btn-edit" @click="handleClick(scope.row)">编辑</div>
              <div class="pd-lr-10 fz-14" style="color: #999;">|</div>
              <div class="btn-delete" @click="handleDelete(scope.row.id)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination
      hide-on-single-page
      background
      layout="prev, pager, next, total, jumper"
      :total="total"
      :page-size="queryInfo.pageSize"
    />
    <edit-dialog
      ref="editDialog"
      :init-data="initData"
      :is-show="isShowEdit"
      @close="handleCloseEdit"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
import { apiGetPayPlanList, apiAddPayPlan, apiEditPayPlan, apiDeletePayPlan } from './api.js'
import dayjs from 'dayjs'
import EditDialog from './components/edit-dialog'
import { handleScreenWidthToVw } from '@/utils/tools'

export default {
  components: { EditDialog },
  filters: {
    dateFormat(value, format = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(format)
    },
  },

  data() {
    return {
      queryInfo: {
        energyTypeEnumList: ['PROPERTY'],
        pageSize: 10,
        pageNo: 1,
      },
      total: 0,
      tableData: [],
      isShowEdit: false,
      isAdd: false,
      initData: {},
      loading: false,
    }
  },

  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
  },

  created() {
    this.getCardPageList()
  },
  methods: {
    handleReset() {
      this.queryInfo.userName = ''
      this.queryInfo.phone = ''
      this.getCardPageList()
    },
    handleAdd() {
      this.isAdd = true
      this.isShowEdit = true
      this.initData = {
        // 默认为物业费
        energyTypeEnum: 'PROPERTY',
      }
    },
    async getCardPageList() {
      this.loading = true
      try {
        const data = await apiGetPayPlanList({ ...this.queryInfo })
        if (!data) return

        this.total = data.total || 0
        this.tableData = data.records || 0
      } finally {
        this.loading = false
      }
    },
    handleCloseEdit() {
      this.isShowEdit = false
    },
    async handleSubmit(form) {
      try {
        this.isAdd ? await apiAddPayPlan(form) : await apiEditPayPlan(form)
        this.$message.success(this.isAdd ? '新增成功！' : '修改成功！')
        this.isShowEdit = false
        this.getCardPageList()
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.$refs.editDialog && this.$refs.editDialog.handleCloseLoading()
      }
    },
    handleClick(item) {
      this.isAdd = false
      this.isShowEdit = true
      this.initData = { ...item }
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        try {
          await apiDeletePayPlan(id)
          this.$message.success('删除成功！')
          if (this.tableData.length === 1 && this.total > 1) {
            this.queryInfo.pageNo -= 1
          }
          this.getCardPageList()
        } catch (msg) {
          this.$message.error(msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
}

.query-container {
  display: flex;
  flex-direction: row;
}

.btn-edit {
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}
</style>
